<template>
    <div>
      <div style=" margin-bottom:10px">
            <span >当前位置：客户管理>客户产品对应表</span>
        </div>
      <el-container >
      <el-header style="background-color: rgba(242, 235, 235, 0.87);height:150px;">
        <el-card class="box-card" style="line-height: 3px;">
          <div slot="header" class="clearfix" style="height: 2px;">
                            <span>客户资料</span>
           </div>
           <div  class="text item">
            客户代码：<el-input  style="width: 150px; padding-left:10px" placeholder="请输入客户代码" v-model="selectOption.customerId"></el-input>
            客户名称：<el-input  style="width: 150px; padding-left:10px" placeholder="请输入客户名称" v-model="selectOption.customerName"></el-input>
            公司商务：<el-input  style="width: 150px; padding-left:10px"  placeholder="请输入公司商务" v-model="selectOption.companyBusiness"></el-input>
            填写人名称：<el-input  style="width: 150px; padding-left:10px"  placeholder="请输入填写人名称" v-model="selectOption.writterName"></el-input>
              <el-button icon="el-icon-search" type="primary"  style="margin-left:110px;" @click="queryCustomers">搜索</el-button>
              <el-button icon="el-icon-search" type="primary" @click="reset">重置</el-button>
              <el-button type="primary" @click="dialogFormVisible = true">新增审批</el-button>
            </div>
            </el-card>
    </el-header>
      <el-main>
        <el-card class="box-card" style="line-height: 3px;">
                        <div slot="header" class="clearfix" style="height: 2px;">
                            <span>客户资料详情</span>
                        </div>
      <el-row>
        <el-col :span="24">
          <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="writterName"
            label="填写人名称"
            >
          </el-table-column>
          <el-table-column
            prop="applicationDate"
            value-format="yyyy-MM-dd"
            label="申请日期">
          </el-table-column>
          <el-table-column
            prop="salesmanName"
            label="销售员名称">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="客户名称"
            width="110"
            >
          </el-table-column>
          <el-table-column
            prop="dutyNumber"
            label="税号"
            width="110"
            >
          </el-table-column>
          <el-table-column
            prop="customerType"
            label="客户类型"
            width="110"
            >
            <template slot-scope="scope">
              {{ showCustomerType(scope.row.customerType) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="customerBackground"
            label="客户背景"
            width="110"
            >
          </el-table-column>
          <el-table-column
            prop="industryScope"
            label="行业范围"
            width="110"
            >
            <template slot-scope="scope">
              {{ showIndustryScope(scope.row.industryScope) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="natureEnterprise"
            label="企业性质"
            width="110"
            >
            <template slot-scope="scope">
              {{ showNatureEnterprise(scope.row.natureEnterprise) }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <el-button type="primary" icon="el-icon-search">查看</el-button>
          </el-table-column>
        </el-table>
        </el-col>
      </el-row>
      <el-row>
          <el-col :span="24">
              <el-pagination
                  background
                  :page-sizes="[3,5,10]"
                  :page-size="pageSize"
                  :current-page="pageNum"
                  layout="total,sizes,prev, pager, next"
                  :total="total"
                  @next-click="nextPage"
                  @prev-click="prevPage"
                  @size-change="sizePage"
                  @current-change="currentPage"
                  >
              </el-pagination>
          </el-col>
      </el-row>
      </el-card>
      </el-main>
    </el-container>
    <el-dialog title="客户资料新增审批" :visible.sync="dialogFormVisible" style="width: 1700px;">
            <h1>新增客户处理</h1>
                    <el-form >
                        <el-row>
                          <el-col :span="12">
                    <el-form-item label="填写人名称:" label-width="120px">
                    <el-input autocomplete="off" v-model="customer.writterName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="销售员名称:" label-width="120px">
                      <el-input autocomplete="off" v-model="customer.salemanName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="销售员所属地区:" label-width="120px">
                      <el-input autocomplete="off" v-model="customer.salemanAddress"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="商务地区:" label-width="120px">
                      <el-input autocomplete="off" v-model="customer.businessAddress"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="公司商务:" label-width="120px">
                      <el-input autocomplete="off" v-model="customer.companyBusiness"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户名称:" label-width="120px">
                      <el-input autocomplete="off" v-model="customer.customerName"></el-input>
                    </el-form-item>
                  </el-col>
                    <el-col :span="12">
                    <el-form-item label="客户类型:" label-width="120px">
                      <el-select placeholder="请选择客户类型" v-model="customer.customerType">
                                        <el-option
                                          v-for="item in options"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                      </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="客户背景:" label-width="120px">
                      <el-input  autocomplete="off" v-model="customer.customerBackground"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="行业范围:" label-width="120px">
                      <el-select placeholder="请选择行业范围" v-model="customer.industryScope">
                                        <el-option
                                          v-for="item in option"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                      </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="企业性质:" label-width="120px">
                      <el-select placeholder="请选择企业性质" v-model="customer.natureEnterprise">
                                        <el-option
                                          v-for="item in enterOption"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                      </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="订单类型:" label-width="120px">
                      <el-select placeholder="请选择订单类型" v-model="customer.orderType">
                                        <el-option
                                          v-for="item in orderOption"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                      </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="付款方式:" label-width="120px">
                      <el-select placeholder="请选择付款方式" v-model="customer.paymentMethod">
                                        <el-option
                                          v-for="item in payOption"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                      </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="申请日期:" label-width="120px">
                                    <el-date-picker
                                      value-format="yyyy-MM-dd"
                                      v-model="customer.applicationDate"
                                      type="date"
                                      placeholder="报价开始有效期">
                                    </el-date-picker>
                    </el-form-item>
                  </el-col>   
                </el-row>
                <el-button type="primary" style="margin-left: 550px;" @click="addCustomer">新增</el-button>   
                <el-button type="info" @click="dialogFormVisible=false">取消</el-button>   
                </el-form>

                <h1>新增开票/订货处理</h1>
                    <el-form >
                        <el-row>
                          <el-col :span="12">
                    <el-form-item label="开户行编号:" label-width="120px">
                    <el-input autocomplete="off" v-model="orderBilling.bankId"></el-input>
                    </el-form-item>
                  </el-col>
                          <el-col :span="12">
                    <el-form-item label="填写人名称:" label-width="120px">
                    <el-input autocomplete="off" v-model="orderBilling.writterName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开票单位:" label-width="120px">
                      <el-input autocomplete="off" v-model="orderBilling.billingUnit"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开户行名称:" label-width="120px">
                      <el-input autocomplete="off" v-model="orderBilling.bankName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开票账号:" label-width="120px">
                      <el-input autocomplete="off" v-model="orderBilling.account"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开票手机号:" label-width="120px">
                      <el-input autocomplete="off" v-model="orderBilling.phone"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="特殊开票要求:" label-width="120px">
                      <el-input autocomplete="off" v-model="orderBilling.billingSpecial"></el-input>
                    </el-form-item>
                  </el-col>
                    <el-col :span="12">
                    <el-form-item label="联系地址:" label-width="120px">
                    <el-input  autocomplete="off" v-model="orderBilling.address"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="联系人:" label-width="120px">
                    <el-input  autocomplete="off" v-model="orderBilling.contactPerson"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="是否跨区:" label-width="120px">
                      <el-select placeholder="请选择是否跨区" v-model="orderBilling.status">
                                        <el-option
                                          v-for="item in optionStatus"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                      </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="订货单位:" label-width="120px">
                    <el-input  autocomplete="off" v-model="orderBilling.orderingUnit"></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
                <el-button type="primary" style="margin-left: 550px;" @click="addOrderBillingsRedis">新增</el-button>   
                <el-button type="info" @click="dialogFormVisible=false">取消</el-button>   
                </el-form>

                <h1>新增收货/收票处理</h1>
                    <el-form >
                        <el-row>
                          <el-col :span="12">
                    <el-form-item label="收货单位:" label-width="120px">
                    <el-input autocomplete="off" v-model="reConsignee.consigneeUnit"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="收货/收票地址:" label-width="120px">
                      <el-input autocomplete="off" v-model="reConsignee.deliveryAddress"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="收货/收票人:" label-width="120px">
                      <el-input autocomplete="off" v-model="reConsignee.consignee"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="手机号:" label-width="120px">
                      <el-input autocomplete="off" v-model="reConsignee.phone"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="运输方式:" label-width="120px">
                      <el-select placeholder="请选择运输方式" v-model="reConsignee.transportOption">
                                        <el-option
                                          v-for="item in transportOption"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="到站地址:" label-width="120px">
                      <el-input autocomplete="off" v-model="reConsignee.arrivalAddress"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否跨区:" label-width="120px">
                      <el-select placeholder="请选择是否跨区" v-model="reConsignee.status">
                                        <el-option
                                          v-for="item in optionStatus"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                    <el-col :span="12">
                    <el-form-item label="收票单位:" label-width="120px">
                    <el-input  autocomplete="off" v-model="reConsignee.ticketUnit"></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
                <el-button type="primary" style="margin-left: 550px;" @click="addReConsigneesRedis">新增</el-button>   
                <el-button type="info" @click="dialogFormVisible=false">取消</el-button>   
                </el-form>
          </el-dialog>
    </div>
  </template>

<script>
import Cookies from "js-cookie";
export default {
    data(){
    return{
      dialogFormVisible:false,
      pageSize:5,
      pageNum:1,
      total:20,
      tableData: [],
      options:[
        {id:1,name:'国内KA'},
        {id:2,name:'国际KA'},
        {id:3,name:'全球协议客户'}
      ],
      input:'',
      option:[
        {id:1,name:'电力'},
        {id:2,name:'电信'},
        {id:3,name:'机械制造'}
      ],
      optionStatus:[
        {id:0,name:'跨区'},
        {id:1,name:'非跨区'}
      ],
      orderOption:[
        {id:1,name:'常规客户订单'},
        {id:2,name:'特殊客户订单'}
      ],
      enterOption:[
        {id:1,name:'国企'},
        {id:2,name:'外企'},
        {id:3,name:'中外合资'}
      ],
      payOption:[
        {id:1,name:'微信'},
        {id:2,name:'支付宝'}
      ],
      transportOption:[
        {id:1,name:'海运'},
        {id:2,name:'航运'}
      ],
      customer:{
        writterName:Cookies.get("username"),
        salesmanName:'',
        salesmanAddress:'',
        businessAddress:'',
        companyBusiness:'',
        customerName:'',
        customerType:'',
        customerBackground:'',
        industryScope:'',
        natureEnterprise:'',
        orderType:'',
        paymentMethod:'',
        applicationDate:'',
      },
      orderBilling:{
        bankId:'',
        billingUnit:'',
        bankName:'',
        account:'',
        phone:'',
        billingSpecial:'',
        address:'',
        contactPerson:'',
        status:'',
        orderingUnit:'',
        writterName:'',
      },
      reConsignee:{
        consigneeUnit:'',
        deliveryAddress:'',
        consignee:'',
        phone:'',
        transportType:'',
        arrivalAddress:'',
        status:'',
        ticketUnit:''
      },
      selectOption:{
        customerId:'',
        customerName:'',
        companyBusiness:'',
        writterName:'',
      }
    }},
    methods:{
      queryAllBasic(){
          let params = {};
          params.pageNum = this.pageNum;
          params.pageSize = this.pageSize;
          params.param = this.selectOption;
          this.$axios.post('an/queryAllBasic',params)
          .then(res=>{
            this.tableData = res.data.data.list;
            this.pageNum = res.data.data.pageNum;
            this.pageSize = res.data.data.pageSize;
            this.total = res.data.data.total;
          })
        },
        reset(){
          this.selectOption.customerId = "";
          this.selectOption.customerName = "";
          this.selectOption.companyBusiness = "";
          this.selectOption.writterName = "";
        },
        queryCustomers(){
          this.pageNum = 1;
          this.queryAllBasic();
        },
        nextPage(val){
            this.pageNum = val;
            this.queryAllBasic();
        },
        prevPage(val){
            //上一页
            this.pageNum = val;
            this.queryAllBasic();
        },
        sizePage(val){
            this.pageSize = val;
            this.pageNum = 1;
            this.queryAllBasic();
        },
        currentPage(val){
            this.pageNum=val;
            this.queryAllBasic();
        },
        showCustomerType(val){
          if(val == 1){
            return '国内KA';
          }else if(val == 2){
            return  '国际KA';
          }else if(val == 3){
            return '全球协议客户'
          }
        },
        showIndustryScope(val){
          if(val == 1){
            return '电力';
          }else if(val == 2){
            return '电信';
          }else if(val == 3){
            return '机械制造'
          }
        },
        showNatureEnterprise(val){
          if(val == 1){
            return '国企';
          }else if(val == 2){
            return '外企';
          }else if(val == 3){
            return '中外合资';
          }
        },
        addCustomer(){
          let params = {};
          params = this.customer;

          this.$axios.post('an/addCustomerRedis',params)
          .then(res=>{
            if(res.data.code == 200){
              this.$message({
              message: "新增客户处理成功",
              type: "success"
      })
              this.pageNum = 1;
              this.queryAllBasic();
            }
          })
        },
        addOrderBillingsRedis(){
          let params = {};
          params.data = this.orderBilling;
          params.processId = "claimExpenseProcess"
          params.businessKey = "customer"
          this.$axios.post('ap/process/start',params)
          .then(res=>{
              this.$message({
              message: "新增开票/订货处理成功",
              type: "success"
      })
              this.pageNum = 1;
              this.queryAllBasic();
          })
        },
        addReConsigneesRedis(){
          let params = {};
          params = this.reConsignee;
          this.$axios.post('an/addReConsigneesRedis',params)
          .then(res=>{
            if(res.data.code == 200){
              this.$message({
              message: "新增收货/收票处理成功",
              type: "success"
      })
              this.pageNum = 1;
              this.queryAllBasic();
            }
          })
        }
    },
    created(){
      this.queryAllBasic();
    }
}
</script>

<style scoped>
   .text {
      font-size: 14px;
    }
  
    .item {
      margin-bottom: 18px;
    }
  
    .reset-btn {
    float: right;
    padding: 10px;
    margin-right: 10px !important;
  }
  
  .search-btn {
    float: right;
    padding: 10px;
  }
  
  
  .el-main {
      background-color:rgba(242, 235, 235, 0.837);
      color: #333;
      line-height:560px;
    }
</style>